<template>
	<view class="content">
		<view class="card">
			<view class="card1">
				<view class="top">
					<view class="text">
						{{shopName}}
					</view>
					<image src="../../../static/images/vip1.png" mode="aspectFill"></image>
				</view>
				<view class="middle">
					{{data.name}}<text>/{{data.schoolHour}}节</text>
				</view>
				<view class="bottom justify-between">
					<view class="text" style="font-size: 40rpx; color: #000;">
						￥{{data.price}}
					</view>
					<view class="text" style="font-size: 24rpx; margin-top: 100rpx;">
						购买后{{data.shelfLifeDays}}天内有效
					</view>
				</view>
			</view>
		</view>
		<view class="title-con">
			<view class="title">
				购买须知
			</view>
			<view class="text">
				·需提前1小时预约
			</view>
			<view class="text">
				·周末、法定节假日通用
			</view>
			<view class="text">
				·卡一经购买则不支持退款，如过期自动作废
			</view>
		</view>
		<view class="footer">
			<button @tap="showModal" data-target="Modal">立即购买</button>
		</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="top-title">
						<view class="title">立即支付</view>
						<view class="cuIcon-close" @tap="hideModal"></view>
					</view>
					<view class="title">
						{{data.name}}
					</view>
				</view>
				<view class="margin-top">
					<view class="list">
						<view class="list-item">
							支付金额
						</view>
						<view class="money">
							￥{{data.price}}
						</view>
					</view>
					<view class="list">
						<view class="list-item">
							支付方式
						</view>
						<view class="weixin">
							微信支付
						</view>
					</view>
					<view class="footer footer1">
						<button @tap="toResult">立即购买</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiModal from "@/components/modal/modal"//弹窗
	import {findUserCard,getShopByUserId,buyVipCard,toPay} from '@/api/index.js';
	import request from "@/common/request.js"
	export default {
		components: {
			tuiModal,
		},
		data() {
			return {
				modalName: null,
				data:null,
				shopName:'',
				id: '',
				shopId: 0
			};
		},
		onLoad(data) {
			console.log(data.item)
			this.data = JSON.parse(data.item);
			console.log(this.data)
			let shopid = uni.getStorageSync('shopID')
			this.shopId = shopid
			this.shopname(shopid)

		},
		methods: {
			//获取商家名称
			shopname(shopid){
				let shoplist = uni.getStorageSync('shoplist')
				console.log(shoplist)
				let arr = shoplist.filter(itm=>{
					return itm.id==shopid
				})
				this.shopName = arr[0].shopName
				
			},
			// 弹窗
			showModal(e) {
				console.log(e);
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			toResult(){
				let _this = this
				toPay(_this.data.purchaseRecordId,1).then(re=>{
					console.log(re)
					uni.showToast({
						title: '加载中',
						icon: 'loading',
						duration: 8000
					});
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: re.timeStamp,
						nonceStr: re.nonceStr,
						package: re.package,
						signType: re.signType,
						paySign: re.paySign,
						success: function (ress) {
							uni.hideToast();
							console.log('success:' + JSON.stringify(ress));
							_this.$api.msg('支付成功');	
							uni.redirectTo({
							    url: 'submit_review'
							});
						},
						fail: function (err) {
							uni.hideToast();
							_this.$api.msg('支付失败');
							console.log('fail:' + JSON.stringify(err));
						}
					})
				})
				
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.card{
		margin:0 30rpx;
		padding-top:30rpx;
	}
	.card1{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:-60rpx!important;
		padding:0;
		width:100%;
		height: 380rpx;
		padding:0;
		background: url(../../../static/images/vip2.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.top image{
		width:82rpx;
		height:40rpx;
		margin:32rpx;
	}
	.top{
		color: #B59C78;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.top .text{
		flex: 1;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.middle{
		margin-left: 42rpx;
		font-size: 60rpx;
		color: #B59C78;
	}
	.middle text{
		font-size: 40rpx;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		margin:0 50rpx;
	}
	.bottom .text{
		color: #776852;
		font-size: 28rpx;
		margin:88rpx 0 50rpx 0rpx;
		justify-content: space-between;
	}
	.bottom .buy{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #0B0404;
		width:176rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.details{
		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #fff;
		padding:0 36rpx;
		line-height: 100rpx;
	}
	.details .text{
		flex: 1;
	}
	.title-con{
		margin:50rpx 30rpx 0;
	}
	.title-con .title{
		font-size: 30rpx;
		color: #101010;
		margin-bottom: 4rpx;
	}
	.title-con .text{
		color: #999999;
		font-size: 24rpx;
		margin-top:12rpx;
	}
	.footer{
		padding:240rpx 74rpx;
	}
	.footer1{
		padding: 107rpx 74rpx 0;
	}
	.footer button{
		background: #AE874B;
		color:#fff;
		height: 80rpx;
		width: 600rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		line-height: 80rpx;
	}
	.cu-dialog{
		width:100%;
		border-radius: 0;
		height:560rpx;
		background: #fff;
		vertical-align: bottom;
	}
	.cu-bar{
		display: flex;
		flex-direction: column;
	}
	.cu-bar .top-title{
		display: flex;
		flex-direction: row;
		width:100%;
	}
	.cu-bar .top-title .title{
		flex: 1;
		color: #BFBFBF;
		margin-right:-94rpx;
		margin-top:36rpx;
	}
	.cuIcon-close{
		background: #BFBFBF;
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
		margin:34rpx;
	}
	.list{
		height:82rpx;
		display: flex;
		flex-direction: row;
		text-align: left;
		border-bottom: 1px solid #F0EDED;
		line-height: 82rpx;
		padding:0 24rpx;
	}
	.list-item{
		flex: 1;
	}
	.money{
		color: #F00617;
	}
	.text1 {
		font-size: 40rpx;
		color: #000;
	}
</style>
